<template>
  <div class="fixed inset-0 w-full h-full overflow-hidden bg-black">
    <FlickeringGrid
      class="relative inset-0 z-0 [mask-image:radial-gradient(450px_circle_at_center,white,transparent)]"
      :square-size="4"
      :grid-gap="6"
      :max-opacity="0.5"
      :flicker-chance="0.1"
      :width="screenWidth"
      :height="screenHeight"
    />
  </div>
</template>

<script setup lang="ts">
import FlickeringGrid from '@/components/background.vue'
import { ref, onMounted } from 'vue'

const screenWidth = ref(window.innerWidth)
const screenHeight = ref(window.innerWidth)

onMounted(() => {
  const updateSize = () => {
    screenWidth.value = window.innerWidth
    screenHeight.value = window.innerHeight
  }
  updateSize()
  window.addEventListener('resize', updateSize)
})
</script>

<style scoped>

</style>